@import url(./base.less);
@import url(./normalize.less);
@rootSize: 37.5rem;

.w {
  margin: 0 (15 / @rootSize);
}
.co {
  color: #f7b648;
}

body {
  width: 100%;
}
.top {
  width: 100%;
  .head {
    // padding-right: (15 / @rootSize);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (46 / @rootSize);
    vertical-align: middle;

    .left {
      margin-right: (16 / @rootSize);
      span {
        font-size: (14 / @rootSize);
        color: #333;
      }
    }
    .user {
      flex: 1;
      display: flex;
      align-items: center;
      height: (32 / @rootSize);
      // background-color: aqua;
      background-color: #f7f7f7;
      // font-size: (14 / @rootSize);
      border-radius: (15 / @rootSize);
      color: #a1a1a1;

      .iconfont {
        font-size: (14 / @rootSize);
        margin: 0 (10 / @rootSize) 0 (16 / @rootSize);
      }
      input {
        font-size: (14 / @rootSize);
        background-color: #f7f7f7;
        border: none;
      }
    }
    .more {
      margin-left: (26 / @rootSize);
    }
    img {
      height: (16 / @rootSize);
    }
  }

  .z {
    .figure {
      width: (345 / @rootSize);
      margin-top: (5 / @rootSize);
    }

    .point {
      display: flex;
      justify-content: center;
      margin-top: (8 / @rootSize);
      img {
        margin-left: (8 / @rootSize);
        width: (9 / @rootSize);
      }
    }

    .pic {
      // background-color: pink;
      display: flex;
      justify-content: space-between;
      img {
        width: (167 / @rootSize);
      }
    }
  }

  .biaoti {
    height: (52 / @rootSize);
    display: flex;
    justify-content: space-between;
    align-items: center;
    //  background-color: pink;
    h3 {
      font-size: (18 / @rootSize);
      margin-left: (15 / @rootSize);
    }
    img {
      height: (14 / @rootSize);
    }
  }

  .box {
    display: flex;
    width: (346 / @rootSize);
    .minibox {
      width: (167 / @rootSize);
      margin-left: (15 / @rootSize);
      img {
        margin-bottom: (8 / @rootSize);
      }

      .bao {
        font-size: (12 / @rootSize);
        margin-bottom: (8 / @rootSize);
      }
      .chao {
        font-size: (11 / @rootSize);
        margin-bottom: (12 / @rootSize);
      }
      .pi {
        font-size: (11 / @rootSize);
        color: #f49d0c;
      }
    }
  }

  .pice {
    margin-top: (30 / @rootSize);
    margin-bottom: (36 / @rootSize);
  }

  .biaoti1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: (24 / @rootSize);

    .text {
      font-size: (18 / @rootSize);
      margin-left: (15 / @rootSize);
    }
    .dion {
      display: flex;
      margin-top: (6 / @rootSize);
      margin-right: (20 / @rootSize);

      p {
        font-size: (14 / @rootSize);
        font-weight: bold;

        &:nth-child(2) {
          padding-left: (23 / @rootSize);
        }
      }
    }
  }

  .introduce {
    display: flex;
    margin-bottom: (40 / @rootSize);
    .boxes {
      img {
        width: (109 / @rootSize);
        height: (80 / @rootSize);
      }
    }

    .txt {
      height: (90 / @rootSize);
      margin-left: (11 / @rootSize);
      ul {
        li {
          h4 {
            font-size: (17 / @rootSize);
          }
          p {
            font-size: (12 / @rootSize);
            margin-top: (8 / @rootSize);
          }
          span {
            margin-top: (8 / @rootSize);
            font-size: (12 / @rootSize);
            border: 1px solid #ccc;
            padding: (5 / @rootSize);
          }
          .m{
            font-size: (13 / @rootSize);
          }
          .month{
            margin-left: (8 / @rootSize);
            font-size: (9 / @rootSize);
          }
        }
      }
    }
  }

  .tt{
    input{
      background-color: #f2f2f3;
      width: (260 / @rootSize);
      height: (32 / @rootSize);
      border: none;
      border-radius: (15 / @rootSize);
  margin-left: (45 / @rootSize);
  font-size: (12 / @rootSize);
  text-align: center;
  margin-bottom: (24 / @rootSize);
    }
  }

  .bottom{
    margin-bottom: (60 / @rootSize);
  }
}


.footer{
  display: flex;
  width: 100%;
  background-color: pink;
  height: (50 / @rootSize);
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-evenly;
  text-align: center;
  
  ul{
  :hover{
    color: #000;
  }
    i{
      width: (20 / @rootSize);
      height: (20 / @rootSize);
      color: #dedede;
        }
        p{
          font-size: (11 / @rootSize);
          margin-top: (5 / @rootSize);
          color: #dedede;
        }
  }

}
